动效轮播 xSwiperC

---

在线预览

在线模拟尺寸:

介绍

此轮播专注于动效效果，不支持子组件，与x-swiper不同。丰富的插件数据及丰富的动效及缓动函数均可自定义，动画相对平缓流畅，动画酷炫。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.81+	1.1.19

文件路径

@/uni_modules/tmx-ui/components/x-swiper-c/x-swiper-c.uvue

使用

<x-swiper-c></x-swiper-c>

Props 属性

名称	说明	类型	默认值
height	轮播的高	union	200
easing	缓动动画函数	union	'easeOutQuad'
effect	动画效果，如果你是竖向播放设置了vertical，你要根据下面的效果来配合，比如你向上下拉竖的时候配合SimpleSlideYEffect等效果就体验好	union	'StretchXEffect'
autoPlay	是否自动播放	boolean	true
duration	动画播放时间	number	600
interval	间隔时间	number	3500
circular	是否首尾衔接	boolean	true
vertical	是否竖向播放,需要配合动效effect达到视觉上的上下效果	boolean	false
imageFit	图片填充模式：'fill'=拉伸填充, 'cover'=裁剪居中显示	union	'cover'
swipeThreshold	滑动切换的最小距离阈值（像素）	number	60
current	当前索引值。	number	0
list	当前项目数据,如果你想要轮播图片，里面必须要有image字段，如果想要纯背景色或者带背景色必须要有color字段，其它值可以放在data内。	Array	():UTSJSONObject[] => [] as UTSJSONObject[]
dotColor	dot默认颜色	string	'rgba(255,255,255,0.5)'
dotActiveColor	dot激活项的颜色,空值时取全局值。	string	''
dotSize	px单位，dot大小。	number	8
dotBottom	px单位距离底部距离	number	16

Events 事件

名称	参数	说明
change	current: number	切换时触发。
click	current: number	组件被点击时触发。

Slots 插槽

名称	说明	数据
default	-	-
dot	-	-

Ref 方法

名称	参数	返回值	说明
prev	-	-	上一项
next	-	-	下一项
switchToIndex	-	-	播放到指定项
start	-	-	开始自动播放
stop	-	-	停止自动播放,并将进度，索引等重置为起始位置
pause	-	-	暂停播放
resume	-	-	恢复上一次暂停位置处，并继续播放

示例文件路径

/pages/zhanshi/swiper-c

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1;">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	
	<view style="margin: 0 16px;border-radius: 16px;">
		<x-swiper-c :height="150" @click="onclik" @change="onchange" :list="list" :effect='effect' ></x-swiper-c>
	</view>
	<view style="position: relative;margin-top: 0px;">
		<x-sheet :margin="['16']">
			<x-text class="text-weight-b">轮播 xSwiperC</x-text>
			<x-text font-size="12" class="mb-16 opacity-5">这是一个纯动效的轮播，功能挺强大，它与x-swiper不同，为了解决动效效果扩展及避免跨平台dom操作小问题，开发此轮播组件，效果参数非常多。</x-text>
			<view class="mb-16">
				<x-radio-group v-model="effect">
					<x-radio :value="item" v-for="(item,index) in effects" :key="item" :label="item" class="mr-16 mb-10"></x-radio>
				</x-radio-group>
			</view>
			<x-button :block="true" @click="loadData">模拟加载数据</x-button>
		</x-sheet>
	</view>
	
	
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	const effect = ref('StackingSlideEffect')
	const effects = [
		'ScaleSlideEffect','SimpleSlideEffect','SimpleSlideYEffect',
		'FadeEffect','StretchYEffect','StretchXEffect',
		'PushPullEffect','ZoomFadeEffect','FlipYEffect',
		'FlipXEffect','StackingEffect','InStackingEffect',
		'OutStackingEffect','StackingSlideEffect'
	]
	
	const list = ref<UTSJSONObject[]>([
			{ color: '#FF6B6B', image: 'https://xui.tmui.design/sdlybg.jpg' },
			{ color: '#4ECDC4', image: 'https://xui.tmui.design/lp-18.jpg' },
			{ color: '#45B7D1', image: 'https://xui.tmui.design/lp-7.jpg' },
			{ color: '#4ECDC4', image: 'https://xui.tmui.design/lp-18.jpg' }
		])
	const changeEffect = (ef : string) => {
		effect.value = ef
	}
	const onclik = (current:number)=>{
		// console.log(current)
	}
	const onchange = (current:number)=>{
		// console.log(current)
	}
	const loadData = () => {
		list.value = [
			{ color: '#FF6B6B', image: 'https://xui.tmui.design/sdlybg.jpg' },
			{ color: '#4ECDC4', image: 'https://xui.tmui.design/lp-18.jpg' },
			{ color: '#45B7D1', image: 'https://xui.tmui.design/lp-7.jpg' }
		]
	}
</script>

<style>

</style>